<template>
    <div class="article">
        <el-card shadow="hover" class="article-info animated fadeIn">
            <h2>{{ detial.title }}</h2>
            <el-row class="meta">
                <span class="post-time">
                    <span class="meta-item-icon"><i class="fa fa-calendar-o"></i></span>
                    <span class="meta-item-text">发表于</span>
                    <time
                        :title="'创建时间：' + detial.create_time" itemprop="dateCreated datePublished"
                        :datetime="detial.create_time">{{ (detial.create_time || '').split(' ')[0] }}</time>
                    <span v-if="detial.update_time != null" class="meta-divider">|</span>
                    <span v-if="detial.update_time != null" class="meta-item-icon"><i
                            class="fa fa-calendar-check-o"></i></span>
                    <span v-if="detial.update_time != null" class="meta-item-text">更新于</span>
                    <time
                        v-if="detial.update_time != null" :title="'修改时间：' + detial.update_time"
                        itemprop="dateModified" :datetime="detial.update_time">{{ (detial.update_time || '') }}</time>
                </span>
                <span class="post-category">
                    <span class="meta-divider">|</span>
                    <span class="meta-item-icon"><i class="fa fa-folder-o"></i></span>
                    <span class="meta-item-text">分类于</span>
                    <span itemprop="about" itemscope="" itemtype="http://schema.org/Thing">
                        <el-link :href="'/category/' + detial.category_id + '.html'" target="_blank"><span
                                itemprop="name">{{ detial.cate_name }}</span></el-link>
                    </span>
                </span>
                <span class="meta-divider">|</span>
                <span class="meta-item-icon"><i class="fa fa-eye"></i>阅读次数：<span
                        id="busuanzi_value_page_pv"
                        class="busuanzi-value">{{ formatNumber(detial.clicks) }}</span></span>
                <div class="post-symbolscount">
                    <span class="meta-divider">|</span>
                    <span class="meta-item-icon"><i class="fa fa-file-word-o"></i></span>
                    <span class="meta-item-text">本文字数：</span>
                    <span title="本文字数">{{ formatNumber(detial.words) }}</span>
                    <span class="meta-divider">|</span>
                    <span class="meta-item-icon"><i class="fa fa-clock-o"></i></span>
                    <span class="meta-item-text">阅读时长 ≈</span>
                    <span title="阅读时长">{{ detial.read_time }} 分钟</span>
                </div>
            </el-row>
            <el-row class="content">
                <!-- <div class="markdown-body" v-html="detial.content" v-highlight></div> -->
                <!-- <markdown-it-vue-light class="md-body" :content="detial.content" /> -->

                <div v-dompurify-html="detial.content" v-highlight class="markdown-body"></div>

            </el-row>
            <el-row class="prev-next">
                <div v-if="detial.prev != null" class="prev">
                    上一篇：
                    <a :href="'/view/' + detial.prev.id" :title="detial.prev.title">{{ detial.prev.title }}</a>
                </div>
                <div v-if="detial.next != null" class="next">
                    下一篇：
                    <a :href="'/view/' + detial.next.id" :title="detial.next.title">{{ detial.next.title }}</a>
                </div>
            </el-row>
            <el-row class="reward-container">
                <el-button
                    type="primary"
                    onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
                    打赏</el-button>
                <div id="qr" style="display: none;">
                    <div style="display: inline-block">
                        <!-- <img src="../assets/wechatpay.jpg" alt="Mr.Yong 微信支付"> -->
                        <p>微信支付</p>
                    </div>
                    <div style="display: inline-block">
                        <!-- <img src="../assets/alipay.jpg" alt="Mr.Yong 支付宝"> -->
                        <p>支付宝</p>
                    </div>
                </div>
            </el-row>
            <el-row>
                <ul class="post-copyright">
                    <li class="post-copyright-author">
                        <strong>本文作者： </strong>Mr.Yong
                    </li>
                    <li class="post-copyright-link">
                        <strong>本文链接：</strong>
                        <a :href="'/view/' + detial.id" :title="detial.title">{{ current_url }}</a>
                    </li>
                    <li class="post-copyright-license">
                        <strong>版权声明： </strong>本博客所有文章除特别声明外，均采用 <a
                            href="https://creativecommons.org/licenses/by-nc-sa/4.0/" rel="noopener" target="_blank"><i
                                class="iconfont icon-creative-commons"></i> BY-NC-SA</a> 许可协议。转载请注明出处！
                    </li>
                </ul>
            </el-row>
            <el-row>
                <div class="article-end">-------------本文结束<i class="iconfont icon-heart"></i>感谢您的阅读-------------</div>
            </el-row>
            <el-row class="tags">
                <a v-for="(tag, index) in detial.tags" :key='index' href="#" rel="tag"><i class="iconfont icon-tag"></i>
                    {{ tag.name }}</a>
            </el-row>
        </el-card>
        <Comments :params="cparams"></Comments>
    </div>
</template>
<script>
import Clipboard from 'clipboard'
import Comments from "@/components/Comments";

export default {
    name: 'ArticleDom',
    components: {
        Comments,
    },
    data() {
        return {
            params: {},
            cparams: { article_id: this.$route.params.id },
            detial: {
                // content: ''
            },
            current_url: window.location.href,
            clipboard: null,
            copy_text: '复制'
        }
    },
    computed: {
    },
    created() {

    },
    mounted() {
        this.params = this.$route.params;
        // _this.syasJs()
        this.getInfo()
        // hljs.highlightCode()
        this.current_url = window.location.href
    },
    methods: {
        creatCopyBtn() {
            const codeDoms = document.querySelectorAll('pre')
            const i = document.createElement("i")
            i.setAttribute('class', 'el-icon-copy-document hljs-copy')
            i.setAttribute('data-clipboard-action', 'copy')
            Array.from(codeDoms).forEach((item, index) => {
                const dom = i.cloneNode(false)
                const textI = document.createTextNode("复制");
                dom.appendChild(textI)
                dom.setAttribute('data-clipboard-target', '#copy' + index)
                item.appendChild(dom)
                const child = item.children[0]
                child.setAttribute('id', "copy" + index)

                // 行号
                const num = item.innerText.split('\n').length - 1
                const ul = document.createElement("ul")
                ul.setAttribute('class', 'hljs-line-num')
                for (let i = 0; i < num; i++) {
                    const n = i + 1
                    const childLi = document.createElement("li")
                    const liText = document.createTextNode(n);
                    childLi.appendChild(liText)
                    ul.appendChild(childLi)
                }
                item.appendChild(ul)
            })
        },
        copy() {
            this.$nextTick(() => {
                this.clipboard = new Clipboard('.hljs-copy');
                this.clipboard.on('success', e => {
                    // console.log(e)
                    // this.$message.success('复制成功')
                    e.clearSelection();  // 清除文本的选中状态
                });
                this.clipboard.on('error', e => {
                    // this.$message.error('复制失败')
                    e.clearSelection();  // 清除文本的选中状态
                });
            })
        },
        formatNumber(num) {
            return this.funcs.formatNumber(num)
        },
        view(id) {
            this.$router.push({ path: `/view/${id}` })
        },
        getInfo() {
            const _param = {
                id: this.params.id
            }
            this.$Api.getArticleInfo(_param).then(res => {
                this.detial = res.data
                this.detial.content = this.$md.render(this.detial.content)
                this.$nextTick(() => {
                    this.creatCopyBtn()
                    this.copy()
                })
                // _this.detial.content = marked(_this.detial.content)
            })
        }
    }
}
</script>
<style lang="less" scoped>
:deep(pre) {
    position: relative;
    margin-bottom: 24px;
    border-radius: 3px;
    border: 1px solid #C3CCD0;
    background: #FFF;
    overflow: hidden;
    margin-top: 10px;

    .hljs {
        display: block;
        padding: 12px 12px 12px 55px;
        overflow-y: auto;
        font-weight: 300;
        font-family: Menlo, monospace;
        font-size: 14px;
        line-height: 20px;
        white-space: pre-wrap;
    }

    .hljs-copy {
        display: none;
        position: absolute;
        top: 0;
        right: 5px;
        line-height: 20px;
        cursor: pointer;
        color: #ffffff;
        background-color: #9999AA;
        padding: 2px 8px;
        margin: 8px;
        border-radius: 4px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05), 0 2px 4px rgba(0, 0, 0, 0.05);
    }

    .hljs-line-num {
        position: absolute;
        left: 0;
        top: 0;
        width: 40px;
        height: 100%;
        font-size: 14px;
        line-height: 20px;
        padding: 12px 4px 12px 0;
        border-right: 1px solid #c3ccd0;
        border-radius: 3px 0 0 3px;
        background-color: #eee;
        text-align: center;
        font-family: Menlo, monospace;
        color: #aaa;
    }

    &:hover {
        cursor: pointer;

        .hljs-copy {
            display: inline;
        }
    }
}




.article {
    line-height: 30px;

    .article-info {
        margin: 50px 0 10px 0;
        width: 100%;
        color: #555;
        background-color: unset;

        h2 {
            text-align: center;
            font-weight: 400;
            font-size: 26px;
            padding-bottom: 10px;
        }

        .meta {
            width: 100%;
            font-size: 12px;
            color: #999;
            display: flex;
            justify-content: center;

            .meta-divider {
                padding: 0 3px;
            }

        }

        .content {
            padding-top: 20px;

            .editormd-html-preview {
                background-color: unset;
                box-sizing: border-box;
                font-size: 16px;
            }

            .markdown-body {
                text-align: justify;
                line-height: 2;
                :deep(table) {
                    border-collapse: collapse;
                    border-spacing: 0;
                    display: block;
                    width: 100%;
                    overflow: auto;
                    word-break: normal;
                    word-break: keep-all;
                    thead {
                        tr{
                            background-color: #F8F8F8;
                            border-top: 1px solid #ccc;
                        }
                    }
                    tr{
                        &:nth-child(2n) {
                            background-color: #f8f8f8;
                        }
                    }
                    td,th{
                        padding: 6px 13px;
                        border: 1px solid #ddd;
                    }
                }
            }
        }

        .reward-container {
            padding: 10px 0;
            margin: 20px auto;
            width: 90%;
            text-align: center;

            #qr {
                padding-top: 20px;

                img {
                    width: 180px;
                    max-width: 100%;
                    display: inline-block;
                    margin: 0.8em 2em 0 2em;
                }

                p {
                    text-align: center;
                }
            }
        }

        .post-copyright {
            margin: 2em 0 0;
            padding: 0.5em 1em;
            border-left: 3px solid #ff1700;
            background-color: #f9f9f9;
            list-style: none;
            line-height: 2;

            strong {
                font-weight: bolder;
            }

            a {
                overflow-wrap: break-word;
                word-wrap: break-word;
                background-color: transparent;
                color: #555;
                text-decoration: none;
                outline: none;
                border-bottom: 1px solid #ccc;
                cursor: pointer;
            }
        }

        .article-end {
            text-align: center;
            color: #ccc;
            font-size: 16px;
            padding: 20px 0;
        }

        .tags {
            text-align: left;

            a {
                padding: 1px 5px;
                background: #f5f5f5;
                border-bottom: none;
                display: inline-block;
                margin-right: 10px;
                font-size: 13px;
            }

        }

        .prev-next {
            padding: 20px 0;
            line-height: 2;
        }
    }
}

</style>